this 的推导

this 的作用比较理论化，所以本节我们试图从最开始来推导 this 的作用。

没有 this 的情况

假如我们不使用 this 会出现什么情况呢？

现在假如我们不使用对象以及 this，创建了一个小猫的名字，和一个“吃”的函数，这个时候符合我们的想法的代码是：

var catName = "xiaomao";
function eat(name) {
  console.log(name + "在吃饭");
}
eat(catName);

我们现在如果再引入一个名字呢？

var catName = "xiaomao";
var catAge = 17;
function eat(name, age) {
  console.log(age + "岁的" + name + "在吃饭");
}
eat(catName, catAge);

this 对象使用

就需要再声明一个变量并且传入，如果有很多很多变量这样就太麻烦了，所以我们引入了对象这个概念！

var cat = {
  name: "小猫咪",
  age: 17,
};
function eat(name, age) {
  console.log(age + "的" + name + "在吃饭");
}
eat(cat.name, cat.age);

如果我们这时候再引入一个小狗吃饭呢？

var cat = {
  name: "小猫咪",
  age: 17,
};
var dog = {
  name: "小狗",
  age: 16,
};
function eat(name, age) {
  console.log(age + "岁的" + name + "在吃饭");
}
eat(cat.name, xiaomao.cat);
eat(dog.name, dog.age);

这时候还是一切安好的，但是问题来了，如果小猫是正经的吃饭，但是小狗不正经吃饭，他一边吃一边拆家，那这个函数就不满足我们的需求了，需要再声明一个函数。

var cat = {
  name: "小猫咪",
  age: 17,
};
var dog = {
  name: "小狗",
  age: 16,
};
function catEat(name, age) {
  console.log(age + "岁的" + name + "在吃饭");
}
function dogEat(name, age) {
  console.log(age + "岁的" + name + "一边拆家一边吃饭");
}
catEat(cat.name, cat.age);
dogEat(dog.name, dog.age);

这样是不是很别扭，既然每个动物都有一种自己的吃饭方式，那为什么不把函数也整合到变量之中？

var cat = {
  name: "小猫咪",
  age: 17,
  eat: function (name, age) {
    console.log(age + "岁的" + name + "在吃饭");
  },
};
var dog = {
  name: "小狗",
  age: 16,
  eat: function (name, age) {
    console.log(age + "岁的" + name + "一边拆家一边吃饭");
  },
};

cat.eat(cat.name, cat.age);
dog.eat(dog.name, dog.age);

既然我们都把函数整合到对象的内部了，那为什么还需要传参，一般情况下获取对象下的变量就是符合直觉的了！

window.name = "神龙";
window.age = 8888;
var cat = {
  name: "小猫咪",
  age: 17,
  eat: function () {
    console.log(age + "岁的" + name + "在吃饭");
  },
};

cat.eat();

现在虽然调用了cat.eat()，但是获取的 name 和 age 并不是 cat 的对象里的 name 和 age，而是全局变量的 name 和 age，那怎么才能获取到对象的 name 和 age 呢，这时候就引入了 this

var cat = {
  name: "小猫咪",
  age: 17,
  eat: function () {
    console.log(this.age + "岁的" + this.name + "在吃饭");
  },
};

cat.eat();

我们把函数放入了内部，并且成功的让 eat 获取了 name 和 age

那如果小狗也想学习小猫吃饭，我们是不是需要把小猫的 eat 也复制一遍给小狗？并不需要的，其实用 call 就可以实现

var cat = {
  name: "小猫咪",
  age: 17,
  eat: function () {
    console.log(this.age + "岁的" + this.name + "在吃饭");
  },
};
var dog = {
  name: "小狗",
  age: 18,
  eat: function () {
    cat.eat.call(this);
  },
};
dog.eat();

到这里大概就完成了 this，call 和对象的 this 概念的理解。相信你已经学会了 this 的存在意义和基本使用。